<template>
  <div class="table_comp">
    <el-table
      :data="tableData"
      class="table_opaque"
      stripe
      empty-text="暂无数据"
      @sort-change="SortChange"
      @row-click="RowClick"
      @cell-click="CellClick"
      @cell-mouse-enter="CellMouseEnter"
      @cell-mouse-leave="CellMouseLeave"
      @current-change="CurrentChange"
      ref="elTable"
      height="100%"
    >
      <el-table-column v-if="isIndex" width="50">
        <template v-slot="scope"
          ><span class="table_index">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-for="item in titleData"
        :key="item.datakey"
        :prop="item.datakey"
        :label="item.label"
        :width="item.width"
        :min-width="item.minWidth"
        :align="item.align || 'center'"
        :header-align="item.headerAlign || 'center'"
        :fixed="item.fixed"
        :show-overflow-tooltip="true"
        :sortable="item.sortable"
      >
        <template v-slot="scope">
          <!-- 操作项插槽 RowHandler-->
          <slot
            v-if="item.datakey === 'operation'"
            name="RowHandler"
            :row="scope.row"
            :index="scope.$index"
          ></slot>
          <!-- 其他插槽 -->
          <slot
            v-else-if="item.slotName"
            :name="item.slotName"
            :row="scope.row"
            :index="scope.$index"
          ></slot>
          <span v-else>{{ scope.row[item.datakey] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import './use.js'
  export default {
    props: {
      //列表数据
      tableData: {
        type: Array,
        default: () => [],
      },
      //表头
      titleData: {
        type: Array,
        default: () => [],
      },
      //每页条数
      pageSize: {
        type: Number,
        default: 20,
      },
      //当前页数
      pageNum: {
        type: Number,
        default: 0,
      },
      //总数
      total: {
        type: Number,
        default: 0,
      },
      //请求是否加载完
      isLoading: {
        type: Boolean,
        default: false,
      },
      // 是否加索引
      isIndex: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        tableDisabled: false,
        currentPage: 0,
        currentWidth: 200, // 初始列宽
        isResizing: false,
        startX: 0,
        startWidth: 0,
      }
    },
    computed: {},
    watch: {
      tableData() {
        this.$nextTick(() => {
          this.$refs.elTable.doLayout()
        })
      },
      titleData() {
        const index = this.titleData.findIndex(value => value.resizeHandle)
        const result = this.titleData.slice(0, index + 1)
        let sum = 0
        result.forEach(number => {
          sum += Number(number.width) || 0
        })
        this.currentWidth = sum
      },
      pageNum: {
        handler(val) {
          this.currentPage = val
        },
        immediate: true,
      },
    },
    mounted() {
      this.$refs['elTable'].bodyWrapper.addEventListener(
        'scroll',
        this.HandleScroll,
        true
      )
    },
    beforeDestroy() {
      window.removeEventListener('scroll', this.HandleScroll, true)
    },
    methods: {
      HandleScroll(res) {
        const tableTarget = res.target
        const clientHeight = tableTarget.clientHeight // 表格视窗高度 即wraper
        const scrollTop = tableTarget.scrollTop // 表格内容已滚动的高度
        const scrollHeight = tableTarget.scrollHeight // 表格内容撑起的高度

        // 检查是否滚动到底部
        //例如：默认展示20条，滚动到第19条的时候加载新数据
        let rowSize = 1 * 27 // 27列高
        if (scrollTop > 0) {
          if (
            !this.isLoading &&
            scrollHeight - scrollTop <= clientHeight + rowSize
          ) {
            this.$emit('update:isLoading', true)
            this.LoadMore()
          }
        }
      },
      //加载更多
      LoadMore() {
        if (this.tableDisabled) return
        let totalPage = Math.ceil(
          parseInt(this.total) / parseInt(this.pageSize)
        )
        if (this.pageNum < totalPage) {
          this.currentPage++
          this.$emit('update:pageNum', this.currentPage)
          this.$emit('getTable')
        } else {
          this.tableDisabled = true
        }
      },
      SortChange({ column, prop, order }) {
        this.$emit('sort-change', { column, prop, order })
      },
      //单行点击
      RowClick(row, column, event) {
        this.$emit('row-click', { row, column, event })
      },
      //单元格点击
      CellClick(row, column, cell, event) {
        this.$emit('cell-click', { row, column, cell, event })
      },
      //当单元格 hover 进入时会触发该事件
      CellMouseEnter(row, column, cell, event) {
        this.$emit('cell-mouse-enter', { row, column, cell, event })
      },
      //当单元格 hover 退出时会触发该事件
      CellMouseLeave(row, column, cell, event) {
        this.$emit('cell-mouse-leave', { row, column, cell, event })
      },
      CurrentChange(currentRow, oldCurrentRow) {
        this.$emit('current-change', { currentRow, oldCurrentRow })
      },
      TableScrollTop() {
        const tableBodyWrapper = this.$refs['elTable'].bodyWrapper
        if (tableBodyWrapper) {
          tableBodyWrapper.scrollTop = 0
        }
        this.tableDisabled = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .table_comp {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;

    /* 调整表头单元格定位 */
    ::v-deep .el-table th {
      position: relative;
    }

    ::v-deep .el-table .cell {
      width: 100% !important;
    }

    ::v-deep .table_opaque {
      &.el-table {
        background-color: transparent;

        &::before {
          height: 0;
        }

        .el-table__fixed,
        .el-table__fixed-right {
          box-shadow: 0 0 10px rgb(0 0 0 / 52%);

          &::before {
            height: 0;
          }
        }

        tr {
          background-color: transparent;
        }

        th {
          width: 100%;
          height: 31px;
          padding: 0;
          font-size: 16px;
          font-weight: bold;
          color: #b0d5ff;
          background-color: #0e3667c4;
          border-width: 0;

          .cell {
            height: 31px;
            line-height: 31px;
          }
        }

        .el-table__row {
          font-size: 16px;
          color: #fff;

          td {
            height: 32px;
            padding: 0;
            background-color: transparent;
            border-top-width: 0;
            border-bottom-width: 0;
          }

          //奇数行
          &:nth-child(odd) {
            background: #124179a1;
          }

          //偶数行
          &:nth-child(even) {
            background: #1c538f9e;
          }

          &.hover-row {
            td.el-table__cell {
              background: #3271b2;
            }
          }
        }

        .el-table__header-wrapper,
        .el-table__fixed-header-wrapper {
          border-top: 1px solid rgb(132 178 227 / 29.2%);
          border-right: 1px solid rgb(132 178 227 / 29.2%);
          border-left: 1px solid rgb(132 178 227 / 29.2%);
          border-radius: 2px 2px 0 0;
        }

        .el-table__body-wrapper,
        .el-table__fixed-body-wrapper {
          border-right: 1px solid rgb(132 178 227 / 29.2%);
          border-bottom: 1px solid rgb(132 178 227 / 29.2%);
          border-left: 1px solid rgb(132 178 227 / 29.2%);
          border-radius: 0 0 2px 2px;

          &.is-scrolling-left  .el-table__fixed,
          &.is-scrolling-none  .el-table__fixed,
          &.is-scrolling-none  .el-table__fixed-right,
          &.is-scrolling-right  .el-table__fixed-right {
            box-shadow: none;
          }
        }

        .el-table__fixed-header-wrapper {
          th:first-child {
            border-radius: 2px 0 0;
          }
        }

        .caret-wrapper {
          width: 17px;
          height: 31px;
        }

        // 排序按钮默认颜色
        .sort-caret {
          left: 4px;

          &.ascending {
            top: 0;
            border-bottom-color: rgb(176 213 255 / 44%);
          }

          &.descending {
            bottom: 2px;
            border-top-color: rgb(176 213 255 / 44%);
          }
        }

        //排序按钮点击时颜色
        .ascending .sort-caret.ascending {
          border-bottom-color: #b0d5ff;
        }

        .descending .sort-caret.descending {
          border-top-color: #b0d5ff;
        }
      }

      //hover样式
      &.el-table--enable-row-hover
        .el-table__body
        tr:hover
        > td.el-table__cell {
        background-color: #3271b2;
      }

      &.el-table--striped ::v-deep .el-table__body {
        tr.el-table__row--striped.hover-row {
          td.el-table__cell {
            background: #3271b2;
          }
        }

        tr.el-table__row--striped:hover > td.el-table__cell {
          background: #3271b2;
        }
      }

      //序号
      .table_index {
        padding: 0 4px;
        font-family: Arial, sans-serif;
        font-size: 12px;
        font-weight: 900;
        color: #bad7ff;
        border: 1px solid #93c0ff;
        border-radius: 4px;
      }
    }
  }
</style>
